<template>
  <div class="mo-user-jb">
    <AlertBox v-if="getalert" @close="closeAlert" @comfirm="comfirm" msg="是否更新个人资料"></AlertBox>
    <div class="jb-item">
      归属地带:
      <Select v-model="area" size="small" style="width:180px;margin-left:10px">
        <Option v-for="item in areaList" :value="item" :key="item">{{ item }}</Option>
      </Select>
    </div>
    <div class="jb-item">
      <span>年龄:</span>
      <Select v-model="old" size="small" style="width:180px;margin-left:10px">
        <Option v-for="item in oldList" :value="item" :key="item">{{ item }}</Option>
      </Select>
    </div>
    <div class="jb-item">
      <span>星座:</span>
      <Select v-model="con" size="small" style="width:180px;margin-left:10px">
        <Option v-for="item in conList" :value="item" :key="item">{{ item }}</Option>
      </Select>
    </div>
    <div class="jb-item">
      邮箱:
      <Input
        v-model="email"
        placeholder="email"
        style="width: 180px;margin-left:10px"
        size="small"
        type="email"
      />
    </div>
    <div class="jb-item">
      <span>专业:</span>
      <Input
        v-model="zhuanye"
        placeholder="Enter something..."
        style="width: 180px;margin-left:10px"
        size="small"
        maxlength="10"
      />
    </div>
    <div class="jb-item">
      <span>爱好:</span>
      <Input
        v-model="hobby"
        placeholder="Enter something..."
        style="width: 180px;margin-left:10px"
        size="small"
        maxlength="10"
      />
    </div>
    <div class="jb-item">
      <span>最喜欢的作品:</span>
      <Input
        v-model="love"
        placeholder="Enter something..."
        style="width: 180px;margin-left:10px"
        size="small"
        maxlength="10"
      />
    </div>
    <div class="jb-item">
      <span>社交账号:</span>
      <img
        src="../../../../assets/img/qq.png"
        style="width:22px;height:22px;  filter: grayscale(100%);"
      />
    </div>
    <div class="jb-item">关系绑定:基友/闺蜜(0)</div>
    <div class="jb-item">
      <div class="shiokai">个人介绍:</div>
      <Input
        v-model="shokai"
        maxlength="180"
        show-word-limit
        type="textarea"
        placeholder="Enter something..."
        style="width: 600px;margin-left:10px;"
      />
    </div>
    <div class="jb-item-b">
      <div class="jb-item-btn" @click="openAlert"></div>
    </div>
  </div>
</template>
<script>
import { Select, Option, Input } from "view-design";
import AlertBox from "../../alert/alertBox/alertbox";
export default {
  name: "moUserinfoJb",
  data() {
    return {
      areaList: ["音乐", "文人", "视频", "安利"],
      oldList: [
        "14以下",
        "14",
        "15",
        "16",
        "17",
        "18",
        "19",
        "20",
        "21",
        "22",
        "23",
        "24",
        "25",
        "26",
        "27",
        "28",
        "29",
        "30以上"
      ],
      shokai: "",
      conList: [
        "白羊座",
        "金牛座",
        "双子座",
        "巨蟹座",
        "狮子座",
        "处女座",
        "天秤座",
        "天蝎座",
        "射手座",
        "摩羯座",
        "水瓶座",
        "双鱼座"
      ],
      email: "",
      zhuanye: "",
      hobby: "",
      love: "",
      old: "",
      area: "",
      con: "",
      shejiao: "",
      showAlert: ""
    };
  },
  computed: {
    getalert: function() {
      return this.showAlert;
    }
  },
  created() {
    this.$axios
      .get(
        this.$store.getters.url +
          "/getUserinfoo?userid=" +
          localStorage.getItem("loginfo2")
      )
      .then(res => {
        const data = res.data.result;
        console.log(data);
        this.email = data.email;
        this.zhuanye = data.major;
        this.hobby = data.hobby;
        this.old = data.old;
        this.area = data.area;
        this.con = data.constellation;
        this.shejiao = data.shejiao;
        this.shokai = data.shokai;
        this.love = data.love;
      });
  },
  methods: {
    openAlert: function() {
      this.showAlert = true;
    },
    closeAlert: function() {
      this.showAlert = false;
    },
    comfirm: function() {
      this.$axios
        .get(this.$store.getters.url + "/createUserinfo", {
          params: {
            userid: localStorage.getItem("loginfo2"),
            area: this.area,
            old: this.old,
            constellation: this.con,
            major: this.zhuanye,
            hobby: this.hobby,
            love: this.love,
            shokai: this.shokai,
            email: this.email
          }
        })
        .then(res => {
          this.$Message.success(res.data.msg);
        });
    }
  },
  components: { Select, Option, Input, AlertBox }
};
</script>

<style lang="scss" scoped>
.mo-user-jb {
  width: 100%;
  text-align: left;
  padding-left: 5%;
  padding-top: 30px;
  padding-right: 5%;
  .jb-item {
    display: flex;
    align-items: center;
    font-size: 14px;
    margin-bottom: 10px;
    height: 100%;
    input {
      width: 80px;
      margin-left: 10px;
    }
    img {
      margin-left: 10px;
      cursor: pointer;
    }
    .shiokai {
      height: 52px;
    }
  }
  .jb-item-b {
    width: 100%;
    display: flex;
    justify-content: center;
    .jb-item-btn {
      width: 35px;
      height: 35px;
      background-image: url(".././../../../assets/SAOIcon/icon/ok_normal.png");
      background-size: cover;
      cursor: pointer;
      margin-top: 20px;
      &:hover {
        background-image: url(".././../../../assets/SAOIcon/icon/ok_hover.png");
      }
    }
  }
}
</style>